<template>
	<view class="one">
		<view class="table-head">
			<view>总分</view>
			<view>人数</view>
			<view>累计人数</view>
		</view>
		<scroll-view scroll-y="true" class="one-scroll" :scroll-top="scrollTop">
			<view class="btn-group">
				<view :class="isShow=='2'?'active':''" @click="chooseType('2')">文科</view>
				<view :class="isShow=='1'?'active':''" @click="chooseType('1')">理科</view>
			</view>
			<view class="table">
				<view :class="['table-head','table-td',item.isMy?'table-td-active':'']" :id="item.isMy?'me':''" v-for="(item,i) in rankList" :key="i">
					<view>{{item.total}}</view>
					<view>{{item.people}}</view>
					<view>{{item.peopleAmass}}</view>
				</view>
				<!-- <view class="table-head table-td table-td-active" id="me">
					<view>450</view>
					<view>100</view>
					<view>1000</view>
				</view> -->
			</view>
		</scroll-view>
		<view class="one-me" @click='activeNav'>我的</view>
	</view>
</template>

<script>
	import api from 'utils/api.js'
	export default {
			data() {
				return {
					isShow: '2',
					scrollTop: 0,
					rankList: []
				}
			},
			onLoad() {
				this.getRanking();
			},
			methods:{
				// 选择左侧标签锚点定位
				activeNav() {
					let _this = this;
					wx.createSelectorQuery().select('#me').boundingClientRect(function(rect){
						_this.scrollTop = rect.top - 150
					}).exec()
				},
				chooseType(type) {
					if(this.isShow !== type) {
						this.isShow = type;
						this.getRanking();
					}
				},
				getRanking() {
					this.http({
						url: `${api.ServerUrlW}api/v1/gradeSteps/scoresRanking`,
						method: 'POST',
						data: {
							userId: uni.getStorageSync('userId'),
							subjectType: this.isShow
						},
						success: res => {
							if (res.code == 0) {
								this.rankList = res.result;
								let _this = this;
								setTimeout(()=>{
									wx.createSelectorQuery().select('#me').boundingClientRect(function(rect){
										_this.scrollTop = rect.top - 150
									}).exec()
								},20)
							}
						},
					})
				}
			}
		}
</script>

<style lang="less">
	.one{
		.table-head {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20rpx;
			view {
				display: inline-block;
				text-align: center;
				width: 33.33%;
				line-height: 70rpx;
			}
		}
		.table-td {
			margin-top: 0;
			view{
				line-height: 70rpx;
				border-bottom: 1px solid #F1F1F1;
				font-size: 28rpx;
				color: #555555;
			}
		}
		.table-td-active {
			view{
				color: #fe9508;
			}
		}
		.btn-group {
			display: flex;
			padding: 20rpx 0;
			background-color: #f5f5f5;
			view {
				text-align: center;
				display: inline-block;
				width: 35%;
				margin-left: 10%;
				color: #1bb675;
				border: 1px solid #1bb675;
				border-radius: 4px;
				line-height: 60rpx;
			}
			.active {
				background-color: #1bb675;
				color: #FFFFFF;
			}
		}
		.one-me {
			position: fixed;
			right: 30rpx;
			bottom: 100rpx;
			width: 100rpx;
			height: 98rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 98rpx;
			box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px 0px;
			background-color: #FFFFFF;
		}
	}
	.one-scroll {
		height: calc(100vh - 90rpx);
	}
</style>
